<template>
  <div class="main wh-full futures_trade">
    <my-header class="header-main">
      <login-bar></login-bar>
    </my-header>
    <p  class="mhead-line"></p>
    <div class="trc-container">
      <div class="gc-main">
        <div class="trader_box ">
          <div class="tr_left">
            <div class="tr_lefttop">
              <div class="money-cont">
                <div v-if="userData.isLogin" class="topInfo">
                  <p>USDT余额：{{Assinfos.usdt}} </p>
                  <p>总保证金：123456789  </p>
                  <p>浮动盈亏：<i class="lv">0.0000</i></p>
                </div>
                <div v-else class="topinfo_login">
                  <p class="tipcor" @click="navigateTo('/user/login')">请<span class="color-danger">登录</span>后查看</p>
                </div>
                <em class="border-lefts"></em>
                <em class="border-rights"></em>
                <em class="border-bottoms"></em>
                <em class="border-tops"></em>
              </div>
            </div>
            <!-- 列表 -->
            <div class="tab-nav">
              <div class="nav-cont">
                <div class="nav-head">
                  <ul class="clearfix"></ul>
                </div>
                <div class="nav-list">
                  <ul>
                    <li class v-for="(item,index) in hyCoinList" :key="index">
                      <div class="nav-list-li" @click="goTrade('/futures_trade',item)">
                        <h6>{{item.tradcoin||'--'}} / {{item.maincoin||'--'}}</h6>
                        <p>{{item.price||'--'}} ≈ {{item.cny||'--'}} <span class="cfff"> CNY </span></p>
                        <p>成交量:{{item.number||'--'}}</p>
                      </div>
                    </li>
                  </ul>
                </div>
                <em class="border-lefts"></em>
                <em class="border-rights"></em>
                <em class="border-bottoms"></em>
                <em class="border-tops"></em>
              </div>
            </div>
          </div>
          <div class="tr_center">
            <div class="chart-num">
              <img src="../../assets/images/trade/tr_3.png" />
              <img src="../../assets/images/trade/tr_1.png" />
              <span>{{headtopData.tradcoin||'--'}} / {{headtopData.maincoin||'--'}}</span>
              <span class="lv">$ {{headtopData.price}} ≈ {{headtopData.cny}} <em class="cfff">CNY </em></span>
              <span>涨幅:<em class="lv">{{headtopData.rise}}%</em></span>
              <span>开盘价:<em>{{headtopData.low}}</em></span>
              <span>高:<em>{{headtopData.height}}</em></span>
              <span>低:<em>{{headtopData.low}}</em></span>
              <span>手续费：{{headtopData.tradgas*100}}%</span>
            </div>
            <div class="chart-box">
              <div class="chart-cont">
                <div class="chart-cont-can">
                  <!-- K线图 -->
                  <!-- <img src="../../assets/images/trade/tra3.png" alt srcset /> -->
                  <div id='kMap'  class="k-map">
                      <iframe  id='iframe' :src="iframUrl" width="98%"  height="100%" frameborder="0"  scrolling="no"></iframe>
                  </div>
                </div>
                <em class="border-lefts"></em>
                <em class="border-rights"></em>
                <em class="border-bottoms"></em>
                <em class="border-tops"></em>
              </div>
            </div>
          </div>
          <!-- right -->
          <div class="tr_right">
            <div  class="right_box">
              <div  class="news-top">
                <span >最新价</span>
              </div>
              <div  class="news-list">
                <div  class="news-list-cont">
                  <ul class="r_title">
                    <li >价格(USDT)</li>
                    <li >时间</li>
                  </ul>
                  <ul class="right_hislist" v-loading="loading">
                    <li v-for="(item,index) in RighthisData" :key="index" @click="itemInfoBTn(item)">
                      <div class="news-dl" >
                        <span class="hong">{{item.price}}</span>
                        <em>{{item.writedate}}</em>
                      </div>
                    </li>
                  </ul>

                  <em  class="border-lefts"></em>
                  <em  class="border-rights"></em>
                  <em  class="border-bottoms"></em>
                  <em  class="border-tops"></em>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- bottom -->
      <div class="trade_botmain">
          <div  id class="bottom_left">
            <div  class="warehouse">
              <div  class="warehouse-cont">
                <div  class="war-tab">
                  <template>
              <el-tabs v-model="activeName" @tab-click="handleClickList">
                <el-tab-pane label="我的仓位" name="first">
                  <template v-if="userData.isLogin">
                    <el-table
                      :data='TableData1'
                      :header-cell-style="{'background-color':'#303030','font-weight':'400','color':'#ffffff'}"
                      max-height='400'  v-loading="loading"
                    >
                      <el-table-column
                        width="140"
                        :label='$t("date")||"日期"'
                        prop='writedate' 
                      >
                      </el-table-column>
                      <el-table-column label='合约' width='200'>
                        <template slot-scope="scope">
                           {{scope.row.tradcoin}} / {{scope.row.maincoin}}
                        </template>
                      </el-table-column>
                      <el-table-column label='数量(张)' width='200'>
                        <template slot-scope="scope">
                          {{scope.row.number}}
                        </template>
                      </el-table-column>
                      <el-table-column label='开仓均价'>
                        <template slot-scope="scope">
                          {{scope.row.price}}
                        </template>
                      </el-table-column>
                      <el-table-column label='强平价格'>
                        <template slot-scope="scope">
                          {{scope.row.lastprice}}
                        </template>
                      </el-table-column>
                      <el-table-column label='保证金'>
                        <template slot-scope="scope">
                          {{scope.row.margin}}
                        </template>
                      </el-table-column>
                      <el-table-column label='未实现盈亏(回报率)'>
                        <template slot-scope="scope">
                          {{scope.row.uploss}}
                        </template>
                      </el-table-column>
                      <el-table-column label='已实现盈亏(回报率)'>
                        <template slot-scope="scope">
                          {{scope.row.toloss}}
                        </template>
                      </el-table-column>
                      <el-table-column label='未成交数量'>
                        <template slot-scope="scope">
                          {{scope.row.dealnumber}}
                        </template>
                      </el-table-column>
                      <el-table-column
                        align='center'
                        :width="$i18n.locale==='zh-CN'?'100':'120'"
                        :label='"平仓"'
                      >
                        <template slot-scope="scope">
                          <el-button @click="closeconorderbylimit(scope.row)"  size="small" type="danger">限价</el-button>
                        </template>
                      </el-table-column>

                    </el-table>
                  </template>
                </el-tab-pane>
                <!-- 02 -->
                <el-tab-pane label="平仓记录" name="second">
                  <template v-if="userData.isLogin">
              <el-table
                :data='TableData2'
                :header-cell-style="{'background-color':'#303030','font-weight':'400','color':'#ffffff'}"
                max-height='400'
              >
                <el-table-column
                  width="140"
                  :label='$t("date")||"日期"'
                  prop='writedate'  v-loading="loading"
                >
                </el-table-column>
                <el-table-column label='合约' width='200'>
                        <template slot-scope="scope">
                           {{scope.row.tradcoin}} / {{scope.row.maincoin}}
                        </template>
                </el-table-column>
                <el-table-column label='方向' width='200'>
                  <template slot-scope="scope">
                    {{scope.row.tradcoin}}
                  </template>
                </el-table-column>
                <el-table-column label='盈亏' width='200'>
                  <template slot-scope="scope">
                    {{scope.row.maincoin}}
                  </template>
                </el-table-column>
                <el-table-column label='类型'>
                  <template slot-scope="scope">
                    <span :class="scope.row.type==0?'color-success':'color-danger'">{{scope.row.type==0?'做多':'做空'}}</span>
                  </template>
                </el-table-column>
                <el-table-column label='来源' >
                  <template slot-scope="scope">
                    {{scope.row.source}}
                  </template>
                </el-table-column>
                <el-table-column label='记录' >
                  <template slot-scope="scope">
                    {{scope.row.source}}
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </el-tab-pane>
          <!-- 03 -->
          <el-tab-pane label="当前委托" name="third">
            <template v-if="userData.isLogin">
              <el-table
                :data='TableData3'
                :header-cell-style="{'background-color':'#303030','font-weight':'400','color':'#ffffff'}"
                max-height='400'  v-loading="loading3"
              >
                <el-table-column
                  width="140"
                  :label='$t("date")||"日期"'
                  prop='writedate'
                >
                </el-table-column>
                <el-table-column label='合约' width='200'>
                  <template slot-scope="scope">
                    {{scope.row.tradcoin}} / {{scope.row.maincoin}}
                  </template>      
                </el-table-column>
                <el-table-column label='ID'>
                  <template slot-scope="scope">
                    {{scope.row.autoid}}
                  </template>
                </el-table-column>
                <el-table-column label='价格'>
                  <template slot-scope="scope">
                    {{scope.row.price*1}}
                  </template>
                </el-table-column>
                <el-table-column label='倍数'>
                  <template slot-scope="scope">
                    <span v-if="scope.row.level*1=='0.99'" class="color-danger">全仓</span>
                    <span v-else>{{scope.row.level}} X</span>
                  </template>
                </el-table-column>
                <el-table-column label='类型'>
                  <template slot-scope="scope">
                    <span :class="scope.row.type==0?'color-success':'color-danger'">{{scope.row.type==0?'做多':'做空'}} </span>
                  </template>
                </el-table-column>
                <el-table-column label='数量(张)'>
                  <template slot-scope="scope">
                    {{scope.row.number*1}}
                  </template>
                </el-table-column>
                <el-table-column label='未成交数量'>
                  <template slot-scope="scope">
                    {{scope.row.dealnumber}}
                  </template>
                </el-table-column>
                <el-table-column label='附加信息'>
                  <template slot-scope="scope">
                    {{scope.row.dealnumber}}
                  </template>
                </el-table-column>
                <el-table-column label='结束原因'>
                  <template slot-scope="scope">
                    {{scope.row.endinfo}}
                  </template>
                </el-table-column>
                <el-table-column label='来源'>
                  <template slot-scope="scope">
                    {{scope.row.source}}
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      type="danger"
                      @click="repealOrderBtn(scope.$index, scope.row)">撤单</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </template>
                </el-tab-pane>     
                <!-- 04 -->
                <el-tab-pane label="历史委托" name="fourth">
                  <template v-if="userData.isLogin">
              <el-table
                :data='TableData4'
                :header-cell-style="{'background-color':'#303030','font-weight':'400','color':'#ffffff'}"
                max-height='400' v-loading="loading"
              >
                <el-table-column
                  width="140"
                  :label='$t("date")||"日期"'
                  prop='writedate'
                >
                </el-table-column>
                <el-table-column label='合约' width='200'>
                        <template slot-scope="scope">
                           {{scope.row.tradcoin}} / {{scope.row.maincoin}}
                        </template>
                </el-table-column>
                <el-table-column label='ID'>
                  <template slot-scope="scope">
                    {{scope.row.autoid}}
                  </template>
                </el-table-column>
                <el-table-column label='类型'>
                  <template slot-scope="scope">
                    <span :class="scope.row.type==0?'color-success':'color-danger'">{{scope.row.type==0?'做多':'做空'}}</span>
                  </template>
                </el-table-column>
                <el-table-column label='倍数'>
                  <template slot-scope="scope">
                    <span v-if="scope.row.level*1=='0.99'"  class="color-danger">全仓</span>
                    <span v-else>{{scope.row.level}} X</span>
                  </template>
                </el-table-column>
                <el-table-column label='委托价格'>
                  <template slot-scope="scope">
                    {{scope.row.lastprice*1}}
                  </template>
                </el-table-column>
                <el-table-column label='未成交数量'>
                  <template slot-scope="scope">
                    {{scope.row.dealnumber}}
                  </template>
                </el-table-column>
                <el-table-column label='附加信息'>
                  <template slot-scope="scope">
                    {{scope.row.dealnumber}}
                  </template>
                </el-table-column>
                <el-table-column label='结束原因'>
                  <template slot-scope="scope">
                    {{scope.row.endinfo}}
                  </template>
                </el-table-column>
                <el-table-column label='来源'>
                  <template slot-scope="scope">
                    {{scope.row.source}}
                  </template>
                </el-table-column>
              </el-table>
            </template>
                </el-tab-pane>
                <!-- 05 -->
                <el-tab-pane label="我的成交记录" name="five">
                  <template v-if="userData.isLogin">
              <el-table
                :data='TableData5'
                :header-cell-style="{'background-color':'#303030','font-weight':'400','color':'#ffffff'}"
                max-height='400'  v-loading="loading"
              >
                <el-table-column
                  width="140"
                  :label='"时间"'
                  prop='writedate'
                >
                </el-table-column>
                <el-table-column
                  width='180'
                  :label='"委托ID"'
                >
                  <template slot-scope="scope">
                    {{scope.row.id}}
                  </template>
                </el-table-column>	
                <el-table-column label='合约' width='200'>
                        <template slot-scope="scope">
                           {{scope.row.tradcoin}} / {{scope.row.maincoin}}
                        </template>
                </el-table-column>
                <el-table-column label='数量(张)'>
                  <template slot-scope="scope">
                    {{scope.row.number}}
                  </template>
                </el-table-column>
                <el-table-column label='成交均价'>
                  <template slot-scope="scope">
                    {{scope.row.price*1}}
                  </template>
                </el-table-column>
                <el-table-column label='未成交数量'>
                  <template slot-scope="scope">
                    {{scope.row.dealnumber}}
                  </template>
                </el-table-column>
                <el-table-column label='类型'>
                  <template slot-scope="scope">
                    <span :class="scope.row.type==0?'color-success':'color-danger'">{{scope.row.type==0?'做多':'做空'}} </span>
                  </template>
                </el-table-column>
              </el-table>
            </template>
                </el-tab-pane>
              </el-tabs>
            </template>
            <unlogin-tip></unlogin-tip>

                </div>
                <em  class="border-lefts"></em>
                <em  class="border-rights"></em>
                <em  class="border-bottoms"></em>
                <em  class="border-tops"></em>
              </div>
            </div>
          </div>
          <!-- 表单提交 -->
          <div class="bottom_right">
            <div  class="business">
              <div  class="businessbox">
                <div  class="business-cont" v-loading="loading">
                  <div  class="bus-top">
                    <dl  class="clearfix">
                      <dt >
                        <div  class="price-box">
                          <span >买入价</span>
                          <label  growing-ignore="true">
                            <input
                              v-model="vform.price"
                              maxlength="14"
                              placeholder="以市场上最优价格买入"
                            />
                            <span  style="color: rgb(0, 121, 223);">市价</span>
                          </label>
                        </div>
                        <div  class="price-box">
                          <span >买入金额</span>
                          <label  growing-ignore="true">
                            <input  name="price" autocomplete="off" maxlength="14" v-model="vform.number"/>
                            <span  class="currency upper">USDT</span>
                          </label>
                        </div>
                        <div>
                          <ul class="transaction-input flex flex-between mat20">
                            <li><span  @click="changeNum(1,1)"  class="percentage" :class="{active:index==1}">1倍</span></li>
                            <li><span  @click="changeNum(2,1)"  class="percentage" :class="{active:index==2}">2倍</span></li>
                            <li><span  @click="changeNum(3,1)"  class="percentage" :class="{active:index==3}">3倍</span></li>
                            <li><span  @click="changeNum(5,1)"  class="percentage" :class="{active:index==5}">5倍</span></li>
                          </ul>
                        </div>
                        <div  class="t_money">
                          <span >杠杆金额:{{allPrices}} USDT</span>
                          <p >手续费: {{coinTrgas}} USDT</p>
                        </div>
                      </dt>
                      <dd ></dd>
                    </dl>
                  </div>
                  <div  class="bus-down"></div>
                  <div  class="bus-but">
                    <input  type="button" value="市价做多" class="damage" @click="buyshellconBtn(10)"/>
                    <input  type="button" value="市价做空" class="surplus" @click="buyshellconBtn(20)"/>
                  </div>
                  <em  class="border-lefts"></em>
                  <em  class="border-rights"></em>
                  <em  class="border-bottoms"></em>
                  <em  class="border-tops"></em>
                </div>
              </div>
            </div>
          </div>
        </div>
    </div>

    <my-footer></my-footer>
  </div>
</template>

<script>
import { checkTradePassword } from "../../service/TradeService.js";
export default {
  data() {
    return {
      Assinfos:{},
      showDialog: false,
      currencyList: [],
      TableData:[],
      userData: this.userModel,
      hyCoinList:[],
      RighthisData:{},
      toptradcoin:'',
      tradcoin:'',
      headtopData:[],
      loading: true,
      activeName: 'first',
      index:'1',
      vform:{
        number:'',
        level:'1',
        price:'',
      },
      allPrices:'0.00',
      coinTrgas:'0.00',
      iframUrl:'',

      // table数据
      TableData1:[],
      TableData2:[],
      TableData3:[],
      TableData4:[],
      TableData5:[],
      listtable:'',
      loading3:false,
    };
  },
  rules: {
    name: [
      { required: true, message: "请输入金额或数量", trigger: "blur" },
      { min: 3, max: 5, message: "请输入金额或数量", trigger: "blur" }
    ]
  },
  computed: {
    
    
  },
  watch: {
    formInline: {
      handler(val, oldVal) {
        console.log("formInline.buyInput" + val.buyInput, oldVal.buyInput);
        
      },
      deep: true
    },
    vform:{
      handler(val, oldVal) {
        console.log(val.number);
        this.allPrices=(this.vform.price*this.vform.number*this.vform.level).toFixed(6)*1;
        this.coinTrgas=(this.vform.price*this.vform.number*this.headtopData.tradgas).toFixed(6)*1;
      },
      deep: true
    }
  },
  created(){
    this.getconcoin();
  },
  mounted() {
    if (!this.userData.isLogin) {
        // this.errMsg("label120" || "请登录后操作");
        // this.navigateTo("/user/login/");
        return false;
      }else{
        this.getcountcon();
    }
  },
  methods: {
    changeNum(val,i){
      console.log(val);
      this.index=val;
      this.vform.level=this.index;
      this.allPrices=(this.vform.price*this.vform.number*this.vform.level).toFixed(2);
    },
    //跳转
    goTrade(api, data) {
      console.log(data);
      const maincoinid= data.maincoin;
      const coinid = data.tradcoin;
      const link ='/futures_trade?maincoinid='+maincoinid+'&coinid='+coinid+'&areaid=';
      this.iframUrl =`${this.api.baseURL}`+'/kline2/kline.html?maincoin='+maincoinid+'&tradcoin='+coinid+'';
      console.log(link);
      this.navigateTo(link);
      // this.navigateTo(api, {
      //   maincoinid: data.maincoinid,
      //   coinid: data.coinid
      // });
      this.toptradcoin=coinid;
      this.headtopData=data;
      this.vform.price=data.price;
      // 刷新列表
      this.intgetData(this.toptradcoin);
    },
    itemInfoBTn(item){
      this.vform.price=item.price;
    },
    // 获取资产账户折合
    getcountcon() {
      this.request(this.api.getcountcon).then(res => {
        if (res && res.code == "0") {
          this.Assinfos = res.data[0];
        }else{
          this.getDataFaild(res.msg || "获取数据失败");
          return false;
        }
      });
    },
    //int 获取数据 合约币种列表
    getconcoin() {
      return this.request(this.api.getconcoin).then(res => {
        // console.log(`合约币种${JSON.stringify(res)}`);
        if (res.code == "0" && res.data && res.data[0]) {
          this.loading=false;
          this.hyCoinList=res.data;
          this.headtopData=res.data[0];
          this.vform.price=res.data[0].price;
          this.toptradcoin=res.data[0].tradcoin;
          this.iframUrl =`${this.api.baseURL}`+'/kline2/kline.html?maincoin='+res.data[0].maincoin+'&tradcoin='+this.toptradcoin+'';
          console.log(this.iframUrl);
          document.getElementById('iframe').contentWindow.location.reload(true);
          // 刷新列表
          this.intgetData(this.toptradcoin);
          return 
        }
      });
    },
    getMyOrderlist(listArr, coinid) {
      let arr = [];
      if (listArr && this.Util.dataType(listArr) == "array") {
        listArr.map(item => {
          if (item.coinid == coinid) {
            arr.push(item);
          }
        });
        return arr;
      }
    },
    // 切换需要更新的数据
    intgetData(toptradcoin){
      // 大盘历史
      this.gethistorytop(toptradcoin);
      // table 列表数据
      this.getposition(toptradcoin);
    },
    
    // 大盘成交历史
    gethistorytop(toptradcoin) {
      this.RighthisData={};
      this.loading=true;
      return this.request(this.api.gethistorytop,{tradcoin:toptradcoin}).then(res => {
        if (res.code == "0" && res.data && res.data[0]) {
          this.loading=false;
          this.RighthisData=res.data;
          return 
        }else{
          this.loading=false;
        }
      });
    },
    // 买入做多 市价做多
    buyshellconBtn(i){
      let btntype=i;
      if (!this.userData.isLogin) {
        return
      }
      if(this.vform.price==''||this.vform.price<0){
        this.errMsg('价格不能为空');
        return;
      }
      if(this.vform.number==''||this.vform.number<0){
        this.errMsg('数量不能为空');
        return;
      }
      let postData={
        tradcoin:this.toptradcoin,
        price:this.vform.price,
        number:this.vform.number,
        level:this.vform.level,
      }
      if(btntype==10){
        return this.request(this.api.buycon,postData).then(res => {
            if (res.code == "0" && res.data && res.data[0]) {
              this.loading=false;
              this.vform.number='';
              return 
            }else{
              this.errMsg(res.msg);
              this.loading=false;
              return;
            }
          });
      }else if(btntype==20){
        // 卖出做多
        return this.request(this.api.sellcon,postData).then(res => {
            if (res.code == "0" && res.data && res.data[0]) {
              this.loading=false;
              this.vform.number='';
              return 
            }else{
              this.errMsg(res.msg);
              this.loading=false;
              return;
            }
          });
      }
    },
    // tablel栏目数据
    getposition(){
      // 当前委托 t03
      if (this.userData.isLogin) {
        this.loading=true;
        return this.request(this.api.getposition,{tradcoin:this.toptradcoin}).then(res => {
            if (res.code == "0" && res.data && res.data[0]) {
              this.loading=false;
              this.TableData3=res.data;
              return 
            }else{
              this.loading=false;
            }
          });
      }
    },
    gethistoryposition(){
      // 历史委托 t04
      if (this.userData.isLogin) {
        return this.request(this.api.gethistoryposition,{tradcoin:this.toptradcoin}).then(res => {
            if (res.code == "0" && res.data && res.data[0]) {
              this.loading=false;
              this.TableData4=res.data;
              return 
            }else{
              this.loading=false;
            }
          });
      }
    },
    // t05 我的合约 成交记录
    gethistorycontent() {
      return this.request(this.api.gethistorycontent,{tradcoin:this.toptradcoin}).then(res => {
        // console.log(`合约币种${JSON.stringify(res)}`);
        if (res.code == "0" && res.data && res.data[0]) {
          this.TableData5=res.data;
          return 
        }else{
          return
        }
      });
    },
    getmycontent(){
      // 我的仓位 t01
      if (this.userData.isLogin) {
        return this.request(this.api.getmycontent,{tradcoin:this.toptradcoin}).then(res => {
            if (res.code == "0" && res.data && res.data[0]) {
              this.loading=false;
              this.TableData1=res.data;
              return 
            }else{
              this.loading=false;
            }
          });
      }
    },
    getmyconbill(){
      // 我的平仓 合约平仓记录 t02
      if (this.userData.isLogin) {
        return this.request(this.api.getmyconbill,{tradcoin:this.toptradcoin}).then(res => {
            if (res.code == "0" && res.data && res.data[0]) {
              this.loading=false;
              this.TableData2=res.data;
              return 
            }else{
              this.loading=false;
            }
          });
      }
    },
    // tab切换
    handleClickList(tab, event) {
      //选项卡数据切换
        console.log(tab, event);
        console.log(event.target.getAttribute('id'))  //获取到当前元素的id
        const id=event.target.getAttribute('id');
        this.state=event.target.getAttribute('id');
      if(id=='tab-1'){
        this.getmycontent();
      } else if(id=='tab-2'){
        this.getmyconbill();
      }else if(id=='tab-3'){
        this.getposition();
      }else if(id=='tab-4'){
        this.gethistoryposition();
      }else if(id=='tab-5'){
        this.gethistorycontent();
      }
    },
  }
};
</script>
<style lang="scss" scoped>
.trc-container {
  // height: 100%;
  // min-width: 1300px;
  background-color: #000;
  color: #fff;
  .gc-main{
    padding: 10px 0;
  .trader_box {
    display: flex; align-items:flex-start;
    box-sizing: border-box;
    overflow: hidden;
  }
  .tr_left {
    width: 236px;
    // height: 600px;
    box-sizing: border-box;
    margin-left: 10px;
    .tr_lefttop {
      width: 100%;
      border: 1px solid #0a3b4c;
      margin-top: 4px;
      padding-bottom: 4px;
      padding-right: 4px;
      box-sizing: border-box;
      margin-bottom: 20px;
      .money-cont {
        border: 1px solid #0a3b4c;
        margin-top: -4px;
        margin-left: -4px;
        background: #000;
        padding: 14px 0 14px 15px;
        position: relative;
        div{
          > p {
            line-height: 25px;
            font-size: 14px;
          }
        }
        .topinfo_login{
          height: 70px;cursor: pointer;
          p{line-height: 60px;text-align: center;padding-right: 15px;}
        }
      }
    }
    // 列表
    .tab-nav {
      width: 100%;
      border: 1px solid #0a3b4c;
      margin-top: 4px;
      padding-bottom: 4px;
      padding-right: 4px;
      box-sizing: border-box;
      margin-bottom: 20px;
      .nav-cont {
        border: 1px solid #0a3b4c;
        margin-top: -4px;
        margin-left: -4px;
        background: #000;
        position: relative;
        padding-bottom: 20px;
      }
      .nav-head {
        padding: 15px 16px;
      }
      .nav-list {
        margin: 0 10px;
        height: 458px;
        overflow: hidden;
        overflow-y: scroll;
        > ul {
          background: #000;
          background: linear-gradient(
            90deg,
            #000,
            #083248 20%,
            #1baef3 40%,
            #1eabf0 53%,
            #1baef3 67%,
            #083248 87%,
            #000
          );
          filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);
          padding: 1px 0;
          li {
            background: #000;
            padding: 3px 0;
            margin-bottom: 1px;
            .nav-list-li {
              text-align: right;
              line-height: 26px;
              padding: 12px 10px 12px  0;
              cursor: pointer;
              position: relative;
            }
            h6 {
              font-size: 15px;
            }
            p {
              font-size: 12px;
              span{color: #fff;}
            }
          }
        }
      }
    }
  }
  .tr_center {
    width: 75%;
    min-width: 800px;
    margin-left: 10px;
    height: 600px;
    box-sizing: border-box;
    .chart-num {
      padding: 0 36px 25px;
      height: 28px;
      line-height: 28px;
      font-size: 15px;
      position: relative;
      img {
        width: 23px;
        position: absolute;
        top: 3px;
        cursor: pointer;
      }
      > img:first-child {
        left: 10px;
      }
      > img:nth-child(2) {
        right: 10px;
      }
      span {
        display: inline-block;
        text-align: center;
        padding: 0 1.8%;
      }
    }
    .chart-box {
      border: 1px solid #0a3b4c;
      padding-bottom: 4px;
      padding-right: 4px;
      box-sizing: border-box;
      margin-left: 4px;
      margin-bottom: 0px;
      height: 589px;
    }
    .chart-cont {
      border: 1px solid #0a3b4c;
      margin-top: -4px;
      margin-left: -4px;
      position: relative;
      height: 584px;
      background: #000;
    }
    .chart-cont-can {
      width: 100%;
      height: 100%;
      background-size: 130px 136px;
      position: relative;
      img {
        width: 98%;
        padding: 10px;
      }
    }
  }
  .tr_right {
    width: 190px;
    padding-right: 10px;
    box-sizing: border-box;
    margin-left: 15px;
    .right_box {
      .news-top {
        font-size: 17px;
        color: #1987da;
        height: 22px;
        margin-top: 2px;
        > span {
          background: url(../../assets/images/trade/tr_2.png) 0 0 no-repeat;
          background-size: 22px;
          display: inline-block;
          padding-left: 36px;
          height: 22px;
          line-height: 22px;
        }
      }
      .news-list {
        margin-top: 28px;
        width: 100%;
        border: 1px solid #0a3b4c;
        padding-bottom: 4px;
        padding-right: 4px;
        box-sizing: border-box;
        .news-list-cont {
          border: 1px solid #0a3b4c;
          margin-top: -4px;
          margin-left: -4px;
          background: #000;
          position: relative;
          padding: 10px 12px;
          height: 567px;
          .r_title {
            display: flex;
            justify-content: space-between;
          }
        }
        .right_hislist {
          margin-top: 10px;
          li{
            cursor: pointer;
            &:hover{background: #051c28;}
          }

        }
        .news-dl {
          display: flex;
        }
        .news-dl > em,
        .news-dl > span {
          width: 50%;
          font-size: 12px;
          line-height: 25px;
          display: inline-block;
        }
        .news-dl > em {
          text-align: right;
        }
      }
    }
  }
  }
  //边框的颜色
  .border-lefts {
    border-bottom: 2px solid #188abe;
    border-left: 2px solid #188abe;
    bottom: -1px;
    left: -1px;
  }
  .border-rights {
    border-top: 2px solid #188abe;
    border-right: 2px solid #188abe;
    right: -1px;
    top: -1px;
  }
  .border-bottoms {
    border-bottom: 2px solid #188abe;
    border-right: 2px solid #188abe;
    right: -1px;
    bottom: -1px;
  }
  .border-tops {
    border-top: 2px solid #188abe;
    border-left: 2px solid #188abe;
    top: -1px;
    left: -1px;
  }
  .lv {
    color: #098a3e !important;
  }
  .hong {
    color: #c31e36 !important;
  }
  .cfff{color: #fff;}
  .border-bottoms,
  .border-lefts,
  .border-rights,
  .border-tops {
    display: inline-block;
    width: 8px;
    height: 8px;
    position: absolute;
  }
  // tr_bottom
  .trade_botmain {
    display: flex;justify-content:flex-start;
    .bottom_left {
      width: 64%;
      // min-width:1300px; 
      margin-left: 8px;
      .warehouse {
        border: 1px solid #0a3b4c;
        padding-bottom: 4px;
        padding-right: 4px;
        box-sizing: border-box;
        margin-left: 4px;
        margin-bottom: 10px;
        min-height: 226px;
        .warehouse-cont {
          min-height: 224px;
          border: 1px solid #0a3b4c;
          margin-top: -4px;
          margin-left: -4px;
          position: relative;
          background: #000;
          padding: 10px;
        }
      }
    }
    // bottom_right
    .bottom_right{
      padding: 0 10px;
      width: 34%;
      box-sizing: border-box;
      .business {
      .businessbox {
            border: 1px solid #0a3b4c;
            padding-bottom: 4px;
            padding-right: 4px;
            box-sizing: border-box;
            margin-left: 4px;
            margin-bottom: 10px;
            float: left;
            width: calc(100% - 4px);
        }
      .business-cont {
            border: 1px solid #0a3b4c;
            margin-top: -4px;
            margin-left: -4px;
            position: relative;
            background: #000;
            padding: 15px;
            height: 244px;
            box-sizing: border-box;
        }
        dt{width: 50%;}
        .price-box{ 
          display: flex;
          justify-content: space-between;
          margin-top: 8px;
          position: relative;
          >span {
              position: static;
              font-size: 12px;
              line-height: 30px;
              min-width: 24px;
              margin-right: 8px;
              max-width: 100px;
              white-space: nowrap;
              top: 9px;
              left: 16px;
              color: #61688a;
          }
          label {
                display: inline-block;
                height: 30px;
                line-height: 30px;
                -ms-flex: auto;
                flex: auto;
                width: auto;
                border: 0;
                position: relative;
                padding: 0;
              span{
                  margin-top: 8px;
                  font-size: 12px;
                  height: 18px;
                  display: block;
                  position: absolute;
                  right: 8px;
                  top: -7px;
                  color: #61688a;
              }  
            }
          label input {
            font-size: 14px;
            position: static;
            width: 100%;
            border: 1px solid;
            text-indent: 8px;
            height: 30px;
            line-height: 1;
            padding: 10px 0;
            box-sizing: border-box;
            color: #d2d6ec;
            border-color: #383f66;
            background-color: rgba(19,22,37,.2);
          }
        }
        .t_money{
          // display: flex;justify-content: space-between;
          color: #888f94;
          font-size: 12px;
          p{line-height: 30px;}
        }
        .bus-but {
            padding-top: 18px;
            text-align: center;
          >input{
            height: 30px;
            font-size: 16px;
            color: #fff;
            outline: none;
            border: 0;
            width: 30%;
            border-radius: 30px;
            cursor: pointer;
            margin-right: 10%;
          }
          .surplus {background: #00802b!important;}
          .damage {background: #c31e36!important;}    
        }
      }

    }
  }
}
.percentage {
	padding: 3px 14px;
	border: 1px solid #9592af;
	color: #9592af;
  background: #232323;
	cursor: pointer;
	border-radius: 5px;
	margin-top: 15px;
	width: 20%;
}
.mat20{
  margin: 15px 0;
}
.war-tab{
  height: 42px;
  .war-active {
    background: #2b4461!important;
  }
  >span{
    display: inline-block;
    width: 74px;
    height: 23px;
    text-align: center;
    font-size: 13px;
    background: #062432;
    line-height: 23px;
    border-radius: 4px;
    margin: 10px 5px 0;
    cursor: pointer;
  }
  .war-whole {
    position: absolute;
    top: 20px;
    right: 10px;
    background: #031016;
    background: linear-gradient(180deg,#031016,#051c28 12%,#083144 30%,#0d4b68 46%,#0d4b68 55%,#083144 70%,#051c28 89%,#031016);
    >span{
      display: inline-block;
      padding: 0 10px;
      font-size: 12px;
      color: #fff;
      background: #000;
      height: 20px;
      line-height: 20px;
      margin-left: 1px;
    }
    >em{
      padding: 0 30px;
      margin-left: 1px;
      background: #000;
      >i{
        border: 1px solid #0079df;
        border-radius: 4px;
        color: #0079df;
        font-size: 12px;
        width: 65px;
        height: 18px;
        line-height: 18px;
        display: inline-block;
        text-align: center;
        cursor: pointer;
        background: #000;
      }
    }
  }
}

//
@media screen and(max-width: 1366px) {
  .trc-container .trade_botmain .bottom_right .business dt {
    width: 80%;
  }
} 
.mhead-line{
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg,#031016 0,#031016 10%,#09374c 20%,#06212d 30%,#09374c 40%,#09374c 50%,#09374c 60%,#06212d 70%,#06212d 80%,#031016 90%,#031016);
}
.transaction-input{
  .active{background: #0079df;color: #fff;transition: all 0.5s linear;}
}
.k-map {
  height: 565px;
  margin-bottom: 5px;
  #iframe{padding: 10px;}
}

</style>
